<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@page import="java.io.*"%>
<%@ page import="java.net.URL" %>
<%! public URL fileURL;%>

<sql:setDataSource driver="${applicationScope.dbdriver}"
                   url="${applicationScope.connstr}"
                   user="root"
                   password=""/>

<c:set var="userName" value="Bonix"/>
<c:set scope="session" var="tarClient" value="Bonix"/><%--------------------> SESSION VARIABLE--------------%>
<sql:query var="clients">
    SELECT * FROM profile
</sql:query>

<c:forEach var="targetClient" items="${clients.rows}">
    <c:if test="${targetClient.username == sessionScope.tarClient}">
        <c:set var="firstName" value="${targetClient.first_name}"/>
        <c:set var="lastName" value="${targetClient.last_name}"/>
        <c:set var="contact" value="${targetClient.contact}"/>
        <c:set var="birthdate" value="${targetClient.birthdate}"/>
        <c:set var="email" value="${targetClient.email}"/>
        <c:set var="comp_name" value="${targetClient.comp_name}"/>
        <c:set var="description" value="${targetClient.description}"/>
        <c:set var="username" value="${targetClient.username}"/>     
    </c:if>  
</c:forEach>


<!DOCTYPE html>
<html>
    <c:set scope="request" var="title" value="Service Provider"/>
    <jsp:include page="/WEB-INF/profile/profileHead.jsp"/>

    <body>
        <jsp:include page="/WEB-INF/banner.jsp"/>

        <article id="content"> 
            <section class="container pageTitle">
                <span id="header">PROFILE</span>
            </section>
            <section class="container profilePic">
                <form name="profilePic">
                    <c:if test="${requestScope != null}">
                        <c:set var="userPicture" value="${requestScope.imgName}" />
                    </c:if>

                    <c:set var="defaultDir" value="uploads/${sessionScope.tarClient}.jpg" />
                    <%  String filePath =  (String)pageContext.getAttribute("defaultDir");
                        fileURL = pageContext.getServletContext().getResource(filePath);
                    %>
                    <% if (fileURL == null) {%>
                    <input type="image" class="changePicBtn" src="images/profilePic/default.jpg" />
                    <% } else if ((String) pageContext.getAttribute("userPicture") == null && fileURL == null) {%>
                    <input type="image" class="changePicBtn" src="images/profilePic/default.jpg" />
                    <% } else {%>
                    <input type="image" class="changePicBtn" src="uploads/${sessionScope.tarClient}.jpg" />
                    <%}%>
                </form>
                
                <form action="Upload" name="uploadImage" method="POST" enctype="multipart/form-data">
                    <div class="con">
                        <input type="hidden" name="usser" value="${ussername}">
                        <div class="file_button_container uploadImg"><input id="picCurser" type="file" name="profPic" accept="image/*" class="btnDisabled"/></div>
                        <input type="submit" name="upload" value="Ok" class="btnOk">
                    </div>
                </form>
            </section>

            <section class="profileContainer divCurret">
                <div class="curret"></div>
            </section>

            <section class="profileContainer">
                <textarea name="description" class="disabled textArea" readonly>${description}</textarea>
            </section>


            <section class="container page headerAlignment">
                <hr>
                <span id="header">Personal Information</span>
            </section>

            <section class="container view_users form">
                <div class="inner">
                    <form action="updateProfileInfo.jsp" method="POST">
                        <input type="hidden" name="savewhat" value="personalInfo">
                        <table>
                            <tr>
                                <td><input type="button" id="editBtn" onclick="enableEditing()" value="Edit"></td>
                            </tr>
                            <tr>
                                <td>First Name</td>                         
                                <td><input type="text" name="firstName" value="${firstName}" required class="disabled" readonly></td>
                            </tr>
                            <tr>
                                <td>Last Name</td>
                                <td><input type="text" name="lastName" value="${lastName}" required class="disabled" readonly></td>
                            </tr>
                            <tr>
                                <td>Contact Number</td>
                                <td><input type="text" name="contact" value="${contact}" required class="disabled" readonly></td>
                            </tr>
                            <tr>
                                <td>Birthdate</td>
                                <td><input type="date" name="birthdate" value="${birthdate}" class="disabled" readonly></td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td><input type="email" name="emailAdd" value="${email}" required class="disabled" readonly></td>
                            </tr>
                            <tr>
                                <td>Company Name</td>
                                <td><input type="text" name="companyName" value="${comp_name}" required class="disabled" readonly></td>
                            </tr>
                            <input type="hidden" name="username" value="${userName}">
                            <tr>
                                <td colspan="2">
                                    <input type="submit" name="save" value="Save changes" class="btnDisabled" hidden>
                                    <a href="customerProfile.jsp"><input type="button" value="Cancel" class="btnDisabled" name="cancel" hidden/></a>
                                </td>
                            </tr> 
                            <tr>
                                <td rowspan=""><a href="accountSetting.jsp" class="changePassword">Change Password</a>
                                </td>
                            </tr>
                        </table>    
                    </form>
                </div>
            </section>
        </article>

        <script>
            function enableEditing() {
                for (var i = 0; i < document.getElementsByClassName("disabled").length; i++) {
                    var targetElement = document.getElementsByClassName("disabled")[i];
                    targetElement.removeAttribute('readonly');
                }

                for (var i = 0; i < document.getElementsByClassName("btnDisabled").length; i++) {
                    var targetElement = document.getElementsByClassName("btnDisabled")[i];
                    targetElement.removeAttribute('hidden');
                }

                var targetElement = document.getElementById('editBtn');
                targetElement.setAttribute("disabled", "");
            }

            function disableEditing() {
                for (var i = 0; i < document.getElementsByClassName("disabled").length; i++) {
                    var targetElement = document.getElementsByClassName("disabled")[i];
                    targetElement.setAttribute('readonly');
                }

                for (var i = 0; i < document.getElementsByClassName("btnDisabled").length; i++) {
                    var targetElement = document.getElementsByClassName("btnDisabled")[i];
                    targetElement.setAttribute('hidden');
                }

                var targetElement = document.getElementById('editBtn');
                targetElement.removeAttribute("disabled");
            }
        </script>
    </body>
</html>